<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./lib/vue.js"></script>
		<script src="./lib/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			
			<router-link to="/login">登录</router-link>
			<router-link to="/retiger">注册</router-link>
			<router-view></router-view>
			
		</div>
	</body>
	
	<script>
		var login={
			template:'<p>登录</p>'
		}
		var retiger={
			template:'<p>注册</p>'
		}
		
		var resot = new VueRouter({
			routes:[
				{path:'/',redirect:'/login'},
				{path:'/login',component:login},
				{path:'/retiger',component:retiger}
			],
			linkActiveClass:'myactive' //和激活相关的类
		})
		var vm = new Vue({
			el:'#app',
			data:{},
			methods:{},
			router:resot,
			watch:{
				'$route.path':function(newVal,oldVal){
					console.log(newVal + '----'+ oldVal)
					if(newVal === '/login'){
						alert("进入登录页面")
					}else{
						alert("进入注册页面")
					}
				}
			}
		})
	</script>
</html>
